@mixin flex {
  display: flex;
  display: -webkit-flex;
}
@mixin flex-align {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
@mixin flex-center ($justify-content:center, $align-items:center){
  @include flex;
  justify-content: $justify-content;
  align-items: $justify-content;
}
@mixin flex-column {
  @include flex;
  flex-direction: column;
}
@mixin position-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.project-container {
  @include flex;
  .container {
    height: calc(100vh - 124px);
    box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
    border-radius: 10px;
    background-color: #fff;
  }
  .header {
    @include flex-align;
    margin-bottom: 20px;
    &-icon {
      width: 6px;
      height: 6px;
      background-color: #409eff;
      border-radius: 50%;
    }
    &-title {
      margin-left: 8px;
      font-size: 18px;
      color: #131414;
      line-height: 24px;
    }
  }
  .template-tree {
    @include flex-column;
    width: 300px;
    padding-left: 0;
    margin-right: 20px;
    .tree-box{
      flex: 1;
      overflow-y: auto;
    }
  }
  .template-detail {
    @include flex-column;
    position: relative;
    flex: 1;
    background-color: #fff;
    .header-box{
      @include flex-align;
      border-bottom: 1px solid #DCDFE6;
      .header{
        margin-bottom: 0;
      }
      :deep(.el-button){
        margin-left: auto;
      }
    }
    &-form{
      flex:1;
      overflow-y: auto;
    }
    .option-btns{
      @include flex-center;
      margin: 40px auto;
      :deep(.el-button){
        width: 92px;
        height: 36px;
      }
    }
    :deep(.el-empty){
      @include position-center;
    }
  }
}

:deep(.custom-tree-node) {
  width: 100%;
  height: 100%;
  padding: 0 5px 0 0;
  margin-left: 4px;
  .custom-tree-node__label{
    display: inline-flex;
    align-items: center;
    height: 100%;
  }
}
.tree-node-icon{
  @include flex-align;
  font-size: 16px;
}
.svg-icon{
  margin: 0 4px;
}
:deep(.el-tree-node__content){
  width: 100%;
  height: 32px;
  margin: 4px 0;
}
